<template>
    <!-- 新增和修改数据 -->
    <el-dialog draggable :fullscreen="fullscreen" title="分配用户" v-model="dialogVisible" width="600"
        :before-close="handleClose">

        <div>
            <el-transfer filterable :filter-method="filterMethod" filter-placeholder="条件过滤"
                v-model="checkedKeys" :titles="['已选择', '未选择']" :props="{ key: 'id', label: 'label' }" :data="data" />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" :disabled="!permissionData.data['roleuserlist-post']" plain @click="dialogSuerEv()">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue'
import { RoleUserListGet, RoleUserListPost } from '@/api/setting/role/index.js'
import { loadingStore } from '@/stores/index.js'
import { permissionStore } from '@/stores/index.js'

// 权限数据
const permissionData = permissionStore()

const loading = loadingStore()

const emit = defineEmits(['emitGetDataEv'])
const dialogVisible = ref(false)
const roleId = ref('')
const data = ref([])
const checkedKeys = ref([])


const fullscreen = ref(false)

onMounted(() => {

});
onActivated(() => {

})

const handleClose = (done) => {
    done()
}



// 数据
const funsRowEv = async (rowId) => {
    console.log('查询单个数据')
    loading.loading = true
    roleId.value = rowId
    try {
        let arr_data = await RoleUserListGet({ role_id: rowId })
        if (arr_data.status != 200) {
            return
        }
        data.value = arr_data.data.result.data
        checkedKeys.value = arr_data.data.result.checkedKeys

    } catch (error) {
        console.log(error)
        ElMessage.error('获取单个数据接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

const dialogSuerEv = async () => {
    loading.loading = true
    try {
        let arr_data = await RoleUserListPost({ role_id: roleId.value, checkedKeys: checkedKeys.value })
        if (arr_data.status != 200) {
            return
        }
    } catch (error) {
        console.log(error)
        ElMessage.error('获取单个数据接口请求失败' + error)
    } finally {
        loading.loading = false
        dialogVisible.value = false
    }

}

// 过滤配置
const filterMethod = (query, item) => {
    return item.label.toLowerCase().includes(query.toLowerCase())
}

defineExpose({
    dialogVisible,
    funsRowEv
})

</script>

<style lang='less' scoped>
.dialog-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>